﻿@import "../../../css/editone/variables.less";

.track-settings {
    display: -ms-grid;
    -ms-grid-rows: 1fr 20px;
    border: 2px solid transparent;
    border-right: 0;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden;

    
    .rules(@margin, @width) {
        -ms-grid-columns: @margin 1fr ;
        width: @margin + @width;
    }
    @applyLeftMargin();


    .actual-track-settings {
        -ms-grid-column: 2;
        display: -ms-grid;
        -ms-grid-rows: 1em 1fr;
        -ms-grid-columns: 1fr 50px 10px 50px;
        margin-right: 2px;

        .track-knob {
            text-align: center;
        }

        .volume-knob {
            -ms-grid-row: 2;
            -ms-grid-column: 4;
            &:after {
                content: '\E15D';
            }
        }

        .balance-knob {
            -ms-grid-row: 2;
            -ms-grid-column: 2;
            &:after {
                content: 'L/R';
            }
        }
    }

    .resize-handle {
        -ms-grid-row: 2;
        -ms-grid-column: 2;
        -ms-grid-column-span: 3;

        background: rgba(0, 0, 0, 0.3);
        height: 20px;
        line-height: 20px;
        &:hover, .ui-resizable-resizing {
            background: rgba(0, 0, 0, 0.7);
        }
    }

    .track-name {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
        -ms-grid-column-span: 2;
        font-size: 1em;
        text-overflow: ellipsis;
        text-wrap: none;
        padding: 4px 6px;

        @media(max-width: @mediumBreak)
        {
            display: none;
        }
    }

    .pseudo-resize-handle {
        -ms-grid-row: 2;
        -ms-grid-column: 1;
        background: rgba(0, 0, 0, 0.3);
        height: 20px;
    }
}